<html>
<meta charset="utf-8">

<head>
    <link rel="stylesheet" type="text/css" href="mySheet.css">
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        a:link {
            color: #000000;
            background-color: wheat;
        }

        a:visited {
            color: #000000;
            background-color: wheat;
        }

        a:hover {
            color: #FF00FF;
            background-color: greenyellow;
        }

        a:active {
            color: #0000FF;
            background-color: pink;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<div>
    <ul>
        <li>a:link - 正常，未访问过的链接</li>
        <li>a:visited - 用户已访问过的链接</li>
        <li>a:hover - 当用户鼠标放在链接上时</li>
        <li>a:active - 链接被点击的那一刻</li>
        <li>注意 a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面</li>
    </ul>
    <a href="#">测试链接</a>
</div>

</html>